<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>

    <link rel="stylesheet" href="../../bootstrap/css/bootstrap.css">
    <script src="../../../bootstrap/js/jquery-1.9.1.min.js"></script>
    <script src="../../../bootstrap/js/bootstrap.js"></script>
    <script src="../../../bootstrap/js/vue.min.js"></script>
    <script src="../../../bootstrap/js/axios.min.js"></script>

    <style>
        .btn{
            width: 80px;
        }
        label,.col-md-3,.col-md-1{
            display:inline;
        }
        .form-control{
            display:inline;
            width:75%;
        }

        .imgBtn{
            display: inline;
            padding: 12px;
            width: 75px;
            height: 35px;
            line-height: 35px;
            border: 1px solid #23c6c8;
            background: #23c6c8;
            color: #fff;
            text-align: center;
            font-size: 14px;
            border-radius: 3px;
            overflow: hidden;
            position: relative;
            vertical-align: center;
        }
        .imgBtn:hover{
            border: 1px solid #23babc;
            background: #23BABC;
        }
        .imgBtn input{
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
        }
        .form-control{
            width: 65%;
            display: inline;
        }
 </style>



</head>
<body>

<div id="app">

    <div class="container" style="margin-top:60px">

        <form action="#" class="form-horizontal" role="form">



            <div class="form-group">
                <label for="uname" class="control-label col-md-2 col-md-offset-3">&nbsp;&nbsp;姓名:&nbsp;</label>
                <div class="col-md-3">
                    <input type="text" id="uname" class="col-md-3 form-control" v-model="employee.name" placeholder="请输入姓名:">
                </div>
            </div>

            <div class="form-group">
                <label for="uphone" class="control-label col-md-2 col-md-offset-3">手机号:</label>
                <div class="col-md-3">
                    <input type="text" id="uphone" class="col-md-3 form-control" v-model="employee.phone" placeholder="请输入手机号:">
                </div>
            </div>

            <div class="form-group" v-if="flag==1">
                <label class="control-label col-md-2 col-md-offset-3"></label>
                <div class="col-md-3" style="color:red">
                   &nbsp;&nbsp;&nbsp;&nbsp;
                    用户名或密码错误！
                </div>
            </div>
            <div class="form-group" v-if="flag==2">
                <label for="uphone" class="control-label col-md-2 col-md-offset-3"></label>
                <div class="col-md-3" style="color:red">
                    您账号已被管理员停用，请联系管理员继续使用！
                </div>
            </div>

            <!-- 表单控件组 按钮 -->
            <div class="form-group">
                <label for="uphone" class="control-label col-md-2 col-md-offset-3"></label>
                <div class="col-md-3" style="margin-left: 55px">
                    <button type="button" class="btn btn-success" @click="login">登录</button>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
</html>


<script>



    new Vue({
        el:"#app",
        data:{
            list:[],
            employee: {},
            flag: 0
        },
        created:function (){
        },
        methods:{
            login:function (){
                axios.post("/staff/employee/login",this.employee)
                    .then(response=>{
                        console.log(response.data)
                        if(response.data=="2000"){
                            window.location.href="/staff/reimbursement/list"
                        }else if(response.data=="5000"){
                            this.flag = 1
                        }else if(response.data=="4000"){
                            this.flag = 2
                        }
                    })
            }
        }
    });

</script>

